<script setup>
import { ref } from 'vue'
import CodeBlock from '@components/CodeBlock.vue'

// 使用defineOptions定义组件选项
defineOptions({
  name: 'CompilerOptionsDemo',
  inheritAttrs: false,
  // 可以定义其他组件选项
})

// 组件内部状态
const count = ref(0)

// 实现代码描述
const implementationInfo = {
  title: 'defineOptions 实现',
  description: '在 script setup 中直接定义组件选项',
  features: ['name 选项', 'inheritAttrs 选项', '响应式数据']
}

// 编译后的代码描述
const compiledInfo = {
  title: '编译后等效代码',
  description: 'defineOptions 被转换为标准的组件选项',
  features: ['defineComponent 调用', 'setup 函数', '返回响应式数据']
}
</script>

<template>
  <div class="compiler-options-demo">
    <h3>defineOptions 演示</h3>
    
    <div class="demo-content">
      <div class="info-section">
        <p>组件名称: <strong>{{ $options.name }}</strong></p>
        <p>inheritAttrs: <strong>{{ $options.inheritAttrs }}</strong></p>
        <div class="counter">
          <p>计数: {{ count }}</p>
          <button @click="count++" class="demo-button">增加计数</button>
        </div>
      </div>
      
      <div class="code-sections">
        <div class="code-section">
            <h4>{{ implementationInfo.title }}</h4>
            <p>{{ implementationInfo.description }}</p>
            <ul>
              <li v-for="feature in implementationInfo.features" :key="feature">• {{ feature }}</li>
            </ul>
          </div>
          
          <div class="code-section">
            <h4>{{ compiledInfo.title }}</h4>
            <p>{{ compiledInfo.description }}</p>
            <ul>
              <li v-for="feature in compiledInfo.features" :key="feature">• {{ feature }}</li>
            </ul>
          </div>
      </div>
    </div>
    
    <div class="explanation">
      <h4>defineOptions 的优势</h4>
      <ul>
        <li>✅ 在 script setup 中直接定义组件选项，无需额外的 script 块</li>
        <li>✅ 更简洁的代码结构</li>
        <li>✅ 支持定义 name、inheritAttrs、components 等选项</li>
        <li>✅ 更好的开发体验和代码组织</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.compiler-options-demo {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
}

.compiler-options-demo h3 {
  color: #42b883;
  margin-bottom: 1rem;
}

.demo-content {
  margin-bottom: 1.5rem;
}

.info-section {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  border-left: 4px solid #42b883;
}

.info-section p {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-section strong {
  color: #42b883;
}

.counter {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.demo-button {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.demo-button:hover {
  background-color: #38a169;
}

.code-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.code-section {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 6px;
}

.code-section h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #333;
}

.explanation {
  background-color: #e8f5e9;
  padding: 1.5rem;
  border-radius: 6px;
  border-left: 4px solid #4caf50;
}

.explanation h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #2e7d32;
}

.explanation ul {
  margin: 0;
  padding-left: 1.5rem;
}

.explanation li {
  margin-bottom: 0.5rem;
  color: #333;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .code-sections {
    grid-template-columns: 1fr;
  }
}
</style>